<template>
  <div class="view">
    <div class="search-warp">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input clearable @clear="search" size="small" v-model="searchForm.title" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input clearable @clear="search" size="small" v-model="searchForm.remark" placeholder="备注"></el-input>
          </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search">查找</el-button>
        </el-form-item>
      </el-form>
    </div>
    <OperateC
            :top-level="topLevel"
            :add="addArticle"
            :edit="editArticle"
            :remove="removeArticle"
            :add-show="this.$getButtonAuth('article:add')"
            :remove-show="this.$getButtonAuth('article:del:batch')"
    ></OperateC>
    <ArticleTable
            :top-level="topLevel"
            ref="ArticleTableRef"
            :edit-show="this.$getButtonAuth('article:edit')"
            :del-show="this.$getButtonAuth('article:del')"
    ></ArticleTable>
    <ArticleDialog></ArticleDialog>
  </div>
</template>

<script>
  import ArticleDialog from "@/components/dialog/ArticleDialog";
  import OperateC from "@/components/OperateC";
  import ArticleTable from "@/components/table/ArticleTable";
  import {deleteArticleByIds, getArticles} from "@/api/article";
  export default {
    name: "ArticleView",
    components: {ArticleDialog, OperateC, ArticleTable},
    data() {
      return {
        searchForm: {
          title: '',
          remark: '',
        },
        topLevel: 1
      }
    },
    methods: {
      search() {
        this.$refs.ArticleTableRef.getArticles(this.searchForm)
      },
      addArticle() {
        let params = {
          dialogFormVisible: true,
          dialogTitle: "添加文章"
        }
        this.$store.commit("article/openDialogForm", params);
      },
      editArticle() {
        let selected = this.$store.state.article.multipleSelection;
        if (selected.length < 1) {
          this.$message.warning("你还没有选中数据哦！");
          return;
        }
        if (selected.length > 1) {
          this.$message.warning("一次只能修改一条数据哦！")
          return;
        }
        this.$store.dispatch("article/editArticle", selected[0]);
      },
      removeArticle() {
        let selected = this.$store.state.article.multipleSelection;
        if (selected.length < 1) {
          this.$message.warning("请先选择要删除的数据哦！");
          return;
        }
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteArticleByIds(selected).then((res) => {
            this.$message.success(res.data.msg);
            // 刷新
            let params = {
              "current": this.$store.state.article.currentPage,
              "size": this.$store.state.article.pageSize
            };
            getArticles(params).then((res) => {
              this.$store.state.article.tableData = res.data.data;
              this.$store.state.article.total = res.data.total;
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
</script>

<style scoped>

</style>
